<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
  <title>怡天网-关于我们</title>
  <meta name="Keywords" content="怡天体检">
  <meta name="Description" content="怡天体检">
  <link rel="stylesheet" href="css/weui.css"/>
  <link rel="stylesheet" href="css/jquery-weui.css"/>
  <script language="JavaScript" src="js/reserveinst.js"></script>
</head>
<body>
  <div class="container" id="container">
    <div class="page">
      <div class="page__hd">
        <h1 class="page__title">在线预约</h1>
      </div>
      <div id="toast" style="display: none;">
        <div class="weui-mask_transparent"></div>
        <div class="weui-toast">
          <i class="weui-icon-info-circle weui-icon_toast"></i>
          <p class="weui-toast__content"></p>
        </div>
      </div>
      <div class="page__bd">
        <div class="weui-cells__title"></div>
        <div class="weui-cells">
          <div class="weui-cell weui-cell_select weui-cell_select-after">
            <div class="weui-cell__hd">
              <label for="city" class="weui-label">城市</label>
            </div>
            <form id="reserveForm" method="post" action="">
            <div class="weui-cell__bd">
              <select id="city" class="weui-select" onchange="fillInst(this.value,'institution','branch','address')">
                <option value="">请选择城市</option>
                <option value="北京">北京</option>
                <option value="南京">南京</option>
              </select>
            </div>
          </div>
          <div class="weui-cell weui-cell_select weui-cell_select-after">
            <div class="weui-cell__hd">
              <label for="institution" class="weui-label">机构</label>
            </div>
            <div class="weui-cell__bd">
              <select id="institution" name="institution" class="weui-select" onchange="fillBranch(this.value, 'branch','address')">
                <option value="">请选择机构</option>
              </select>
            </div>
          </div>
          <div class="weui-cell weui-cell_select weui-cell_select-after" id="branchContainer">
            <div class="weui-cell__hd">
              <label for="branch" class="weui-label">分院</label>
            </div>
            <div class="weui-cell__bd">
              <select id="branch" name="branch" class="weui-select" onchange="fillAddress(this, 'address')">
                <option value="">请选择分院</option>
              </select>
            </div>
          </div>
          <div class="weui-cell id="addressContainer">
            <div class="weui-cell__hd">
              <label for="address" class="weui-label">地址</label>
            </div>
            <div class="weui-cell__bd" id="address">&nbsp;</div>
            <div class="weui-cell__ft">
            </div>
          </div>
          <div class="weui-cell">
            <div class="weui-cell__hd">
              <label class="weui-label">手机号</label>
            </div>
            <div class="weui-cell__bd">
              <input class="weui-input" type="text" id="mobile" name="mobile" placeholder="请输入手机号" pattern="1[0-9]{10}"/>
            </div>
            <div class="weui-cell__ft">
            </div>
          </div>
          <div class="weui-cell">
            <div class="weui-cell__hd">
              <label class="weui-label">体检卡号</label>
            </div>
            <div class="weui-cell__bd">
              <input class="weui-input" name="card" id="card" type="text" placeholder="请输入体检卡号" pattern="[0-9]*"/>
            </div>
            <div class="weui-cell__ft">
            </div>
          </div>
          <div class="weui-cell">
            <div class="weui-cell__hd">
              <label class="weui-label">预约时间</label>
            </div>
            <div class="weui-cell__bd">
              <input class="weui-input" type="text" placeholder="请选择预约日期" id="reserveDate" name="reserveDate"/>
            </div>
            <div class="weui-cell__ft">
            </div>
          </div>
          </form>
          <a href="javascript:;" class="weui-btn weui-btn_primary">预&nbsp;&nbsp;约</a>
        </div>
        </div>
      </div>
    </div>
    <script src="js/jquery-2.1.4.js"></script>
    <script src="js/form.js"></script>
    <script language="javascript" src="js/jquery-weui.js"></script>
    <script language="javascript">
      var nTime = new Date();
      nTime.setDate(nTime.getDate()+3);
      var minDate = nTime.getFullYear() + "-" + (nTime.getMonth()+1) + "-" + nTime.getDate();
      $("#reserveDate").calendar({
        value: [minDate],
        minDate: minDate
      });
      $(function(){
        var $toast = $('#toast');
        var showToast=function(content) {
          $(".weui-toast__content").html(content);
          if ($toast.css('display') != 'none') return;
          $toast.fadeIn(100);
          setTimeout(function () {
            $toast.fadeOut(100);
          }, 1000)
        };
        $(".weui-btn_primary").on("click", function() {
          if ($("#city").val() == "") {
            showToast("请选择城市");
            return false;
          }
          if ($("#institution").val() == "") {
            showToast("请选择机构");
            return false;
          }
          if ($("#branchContainer").val("display") != "none" && $("#branch").val() == "") {
            showToast("请选择分院");
            return false;
          }
          if ($("#mobile").val() == ""){
            showToast("请输入手机号")
            return  false;
          }
          if ($("#reserveDate").val() == ""){
            showToast("请选择预约日期")
            return  false;
          }
          $('#reserveForm').ajaxSubmit(function (data) {
            if (data.errno == 1) {
              showToast(data.errdesc);
            } else {
              showToast("操作成功！");
            }
          });

        });
      });
    </script>
  </body>
</html>
